<template>
  <span>
    <!-- 触发按钮 -->
    <el-button
      size="mini"
      type="primary"
      icon="el-icon-search"
      @click="visible = true"
    >
      查询作者
    </el-button>

    <!-- 弹窗 -->
    <el-dialog
      title="查询作者"
      :visible.sync="visible"
      width="60%"
      append-to-body
    >
      <!-- 查询条件 -->
      <el-form :model="searchForm" label-width="80px" inline>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchAuthors">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="loading"
        :data="authorList"
        border
        style="width: 100%"
      >
        <el-table-column prop="account" label="工号" width="120" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="deptName" label="机构" />
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="selectAuthor(scope.row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-if="total > 0"
        :current-page="pageInfo.page"
        :page-size="pageInfo.pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right;"
        @current-change="handlePageChange"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
      </span>
    </el-dialog>
  </span>
</template>
<script>
import { getUserList } from '@/api/system'

export default {
  name: 'AuthorSearch',
  props: {
    // 用于传递选中作者信息的表单对象
    targetForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      searchForm: {
        name: ''
      },
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      authorList: []
    }
  },
  methods: {
    // 查询作者
    async searchAuthors() {
      this.loading = true
      try {
        const params = {
          ...this.searchForm,
          pageNum: this.pageInfo.page,
          pageSize: this.pageInfo.pageSize
        }
        const response = await getUserList(params)
        this.authorList = response.data.rows || response.data.list || []
        this.total = response.data.total || 0
      } catch (error) {
        console.error('查询作者失败:', error)
        this.$message.error('查询作者失败')
      } finally {
        this.loading = false
      }
    },
    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        userAccount: '',
        name: '',
        dept: ''
      }
      this.pageInfo.page = 1
      this.authorList = []
      this.total = 0
    },
    // 处理分页变化
    handlePageChange(page) {
      this.pageInfo.page = page
      this.searchAuthors()
    },
    // 选择作者
    selectAuthor(author) {
    // 将选中的作者信息赋值给目标表单
      this.targetForm.userAccount = author.account
      this.targetForm.name = author.name
      this.targetForm.dept = author.deptName
      console.log(author)
      // 关闭弹窗
      this.visible = false
      // 触发选择事件
      this.$emit('author-selected', author)
      this.$message.success('已选择作者信息')
    }
  }
}
</script>
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>
